<template>
  <div>
    <div class="flexBox">
      <div class="div-cd9231" v-for="(item, index) in cardList" :key="index" @click="selectedCard(item)">
          <img class="img-e6935a" :src="item.picUrl" /><span
            class="span-81691d"
            >{{item.creditName}}
          </span>
        </div>
    </div>
    <!-- <md-row class="row-aa6be8">
      <md-col :span="24">
        <div class="div-cd9231">
          <img class="img-e6935a" :src="widget_68617a.options.imageUrl" /><span
            class="span-81691d"
            >{{ widget_68617a.options.content }}
          </span>
        </div>
      </md-col>
      <md-col :span="24">
        <div class="div-cd9231">
          <img class="img-e6935a" :src="widget_68617a.options.imageUrl" /><span
            class="span-81691d"
            >{{ widget_68617a.options.content }}
          </span>
        </div>
      </md-col>
    </md-row> -->
    <div class="div-9b7e68">
      <md-button
        :type="'primary'"
        :nativeType="'button'"
        :size="'large'"
        :plain="false"
        :round="true"
        :inline="false"
        :icon="''"
        :icon-svg="false"
        :inactive="false"
        @click="goBack"
        :iconAlign="'left'"
        >{{ widget_4037e8.options.defaultValue }}</md-button
      >
    </div>
    <!-- <div class="tips">
      <p>上海银行版权所有 沪ICP备14020744</p>
      <p>未经上海银行许可，任何组织和个人不得链接上海银行网站</p>
    </div> -->
  </div>
</template>

<script>
import api from '../assets/js/url'
export default {
  data() {
    return {
      cardList: [],
      widget_68617a: {
        name: "图片-文本",
        options: {
          path: "",
          imageUrl:
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OeUWAHf-NAADbzzh1nYA011.jpg",
          content: "光明勇士联名信用卡银联金卡"
        },
        rules: []
      },
      widget_4037e8: {
        name: "按钮",
        options: {
          defaultValue: "返回",
          submitFunc:
            "/app/wiremock/D5419E20385D4A469B1383CF9183B6FD/transferResults.do",
          iconFlag: false
        },
        rules: []
      }
    };
  },
  methods: {
    queryCredit (id) {
      let params = {
        keyword: id
      }
      this.$remote(api.SELECT_CREDIT, params)
        .then(res => {
          console.log(res)
          this.cardList = res.list
          console.log('this is cardlist', this.cardList)
        })
    },
    selectedCard (data) {
      sa.track('$CollectCreditClick', {
        '$element_content': data.id
      })
      this.$router.push({
        path: 'onlineApply',
        query: data
      })
    },
    goBack() {
      this.$router.push({
        name: "credit"
      });
    }
  },
  mounted () {
    sa.track('$pageview', {
      '$url_path': 'selectCard'
    })
    this.queryCredit(this.$route.query.id)
  },
  // created () {
  //   console.log(this.$route.query)
  //   this.queryCredit(this.$route.query.id)
  // }
};
</script>

<style scoped>
.tips {
  text-align: center;
  font-size: 12px;
  color: rgb(172, 171, 171)
}
.flexBox {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  padding: 15px 0 10px;
  background: #ffffff;
}
.div-cd9231 {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0px;
  padding-bottom: 0px;
  flex-direction: column;
}

.img-e6935a {
  display: block;
  border: 0px solid #dedede;
  height: 95px;
  border-radius: 0px;
}

.span-81691d {
  display: block;
  padding-left: 0px;
  height: 28px;
  font-size: 14px;
  line-height: 28px;
}

.row-aa6be8 {
  border-radius: 0px;
  padding: 10px 0px 0px 10px;
  margin: 0px;
}

.div-9b7e68 {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.div-9b7e68 >>> .md-button.primary {
  background: #06469e;
}
.div-9b7e68 >>> .md-button.primary::after {
  border-color: #06469e;
}
</style>
